<template>
  <view v-if="m_isLoaded">
    <u-sticky>
      <view style="background-color: #fff">
        <u-tabs
          :lineColor="`#fe0203`"
          :activeStyle="{
            color: '#fe0203',
            fontWeight: 'bold',
          }"
          :list="m_list"
          @click="onTabClick"
        />
      </view>
    </u-sticky>
    <u-transition :show="m_show" mode="slide-left">
      <block v-if="m_pageList.length > 0">
        <view
          class="coupon"
          v-for="(coupon, _index) in m_pageList"
          :key="_index"
        >
          <view class="l" v-on:tap="onCouponClick(coupon)">
            <view
              class="lbl"
              :class="{
                bgr: m_type == 0,
                bgg: m_type != 0,
              }"
              >{{ coupon.FClassName }}</view
            >
            <view class="v">
              <text
                class="sb"
                :class="{
                  cr: m_type == 0,
                  cg: m_type != 0,
                }"
                >￥</text
              ><text
                class="vl"
                :class="{
                  cr: m_type == 0,
                  cg: m_type != 0,
                }"
                >{{ coupon.FValue }}</text
              >
            </view>
            <view
              class="m"
              :class="{
                cr: m_type == 0,
                cg: m_type != 0,
              }"
            >
              满{{ coupon.FMinValue }}元可用
            </view>
          </view>
          <view class="r">
            <view class="rl" v-on:tap="onCouponClick(coupon)">
              <view
                class="t"
                :class="{
                  cg: m_type != 0,
                }"
              >
                {{ coupon.FName }}
              </view>
              <view
                class="d"
                :class="{
                  cr: m_type == 0,
                  cg: m_type != 0,
                }"
              >
                {{ formatTime(coupon.FEndTime) + "失效" }}
              </view>
            </view>
            <view class="rr">
              <view v-if="m_type == 0" class="btn" v-on:tap="u($event)">
                去使用
              </view>
              <view class="oc" v-if="m_type != 0">
                <view class="ic">
                  <view> {{ m_type == 1 ? "已使用" : "已过期" }} </view>
                </view>
              </view>
            </view>
          </view>
        </view></block
      >
      <view
        class="none"
        style="
          display: flex;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;
        "
        v-else
      >
        <image
          src="/static/images/order/default_img_order.png"
          style="width: 200px"
          mode="widthFix"
        ></image>
        <view>暂无优惠券</view>
      </view>
    </u-transition>
  </view>
</template>

<script>
import { onMounted, ref } from "@vue/composition-api";
import { reqPost } from "../../common/http.request";
import { useUser } from "../../store/useUser";
import {
  uGetStorageSync,
  uNavigateTo,
  uSwitchTab,
  uToast,
} from "../../utils/uniUtils";

export default {
  setup() {
    onMounted(async () => {
      if (!useUser().hasLogin) {
        uToast("您还未登录！", "error");
        setTimeout(() => {
          uSwitchTab("/pages/tab_bar/index");
        }, 1500);
      } else {
        await GetPageList();
        m_isLoaded.value = true;
      }
    });

    const m_list = ref([
      {
        name: "未使用",
        value: 0,
      },
      {
        name: "已使用",
        value: 1,
      },
      {
        name: "已过期",
        value: 2,
      },
    ]);

    const m_pageList = ref([]);
    const m_isLoaded = ref(false);
    const m_type = ref(0);
    const m_show = ref(false);
    const MemberId = uGetStorageSync("member").MemberId;

    async function GetPageList() {
      const { Data } = await reqPost("GetCouponList", {
        MemberId,
        type: m_type.value,
      });
      m_pageList.value = Data;
      m_show.value = true;
    }

    async function onTabClick(item) {
      m_type.value = item.value;
      await GetPageList();
    }

    async function u(e) {
      e.stopPropagation();
      uSwitchTab("/pages/tab_bar/fl");
    }

    function formatTime(dt) {
      const date = new Date(dt);
      const formattedDateTime = `${date.getFullYear()}-${String(
        date.getMonth() + 1
      ).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")} ${String(
        date.getHours()
      ).padStart(2, "0")}:${String(date.getMinutes()).padStart(
        2,
        "0"
      )}:${String(date.getSeconds()).padStart(2, "0")}`;

      return formattedDateTime;
    }

    function onCouponClick(coupon) {
      uNavigateTo("/pages/coupon/couponDetail?id=" + coupon.FCouponID);
    }

    return {
      m_pageList,
      m_isLoaded,
      m_list,
      m_type,
      m_show,
      onTabClick,
      u,
      formatTime,
      onCouponClick,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "./scss/MyCoupons.scss";

::v-deep .u-tabs__wrapper__nav__item {
  width: 33.333%;
  padding: 0 0 !important;
}
</style>
